<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{ title }}</h2>
    <p>m: {{ m }}</p>
    <hr>
    <p>我们在页面实例化的 vm 一般我们称之为根组件，其他的组件
        都是作为 root 组件的子组件存在的。</p>
    <!--
    i-son 组件其实就是root组件的子组件，它们之间的关系就是
    父子关系
    -->
    <!--
    父子通信的第一步：先在组件的调用处通过一个自定义的属性进行属性绑定（绑定要传递的数据）
    -->
    <i-son :number="m"></i-son>
</div>
</body>
<template id="sonTmp">
    <div>
        <h3>我是 son 组件</h3>
        <b>子组件使用父组件的 m: {{number}}</b>
    </div>
</template>
<script src="lib/vue/vue.js"></script>

<script type="text/javascript">
    /*
    * 定义一个组件
    * */
    Vue.component('i-son', {
        /*
        *  父子通信的第二步：在子组件上面使用 props 定义子组件上面的自定义属性
        *
        *  子组件则可以通过 number 来接收父组件传递的 m
        *
        *  然后子组件里面就可以使用 number 来显示父组件传递的数据信息
        * */
        props: ['number'],
        template: '#sonTmp'
    })

    // 根组件 root
    const vm = new Vue({
        el: '#app',
        data: {
            title: 'vuejs 父子通信的问题',
            m: 100,
        }
    })
</script>

</html>
